---
title: Biểu tượng
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

Danh sách biểu tượng được sử dụng trong ứng dụng của chúng tôi.

## Biểu tượng Tabler

Chúng tôi sử dụng biểu tượng Tabler cho React trong suốt ứng dụng.

<Tabs>

<Tab title="Installation"><br/>

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Props">

You can import each icon as a component. Here's an example: <br />

```jsx
import { IconArrowLeft } from "@tabler/icons-react";

export const MyComponent = () => {
  return <IconArrowLeft color="red" size={48} />;
};
```

</Tab>

<Tab title="Props">

| Thuộc Tính | Loại   | Mô tả                                                  | Mặc định     |
| ---------- | ------ | ------------------------------------------------------ | ------------ |
| kích cỡ    | số     | Chiều cao và chiều rộng của biểu tượng tính bằng pixel | 24           |
| màu sắc    | string | The color of the icons                                 | currentColor |
| nét        | số     | Bề dày nét của biểu tượng tính bằng pixel              | 2            |

</Tab>

</Tabs>

## Biểu tượng Tùy chỉnh

Ngoài biểu tượng Tabler, ứng dụng còn sử dụng một số biểu tượng tùy chỉnh.

### Icon Address Book

Hiển thị biểu tượng sách địa chỉ.

<Tabs>

<Tab title="Usage">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

export const MyComponent = () => {
  return <IconAddressBook size={24} stroke={2} />;
};
```

</Tab>

<Tab title="Props">

| Thuộc Tính | Loại | Mô tả                                                  | Mặc định |
| ---------- | ---- | ------------------------------------------------------ | -------- |
| kích cỡ    | số   | Chiều cao và chiều rộng của biểu tượng tính bằng pixel | 24       |
| nét        | số   | Bề dày nét của biểu tượng tính bằng pixel              | 2        |

</Tab>

</Tabs>
